<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!--html注释
	添加html注释快捷键：ctrl+shift+/
	取消html注释快捷键：ctrl+shift+\
	  -->
	<a name="top">顶部</a>
	<h1>标题1</h1>
	<h2>标题2222</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>
	<hr>
	<p>这是一个段落</p>
	<!--
	a标签就是超链接
	href意思是指定超链接目标的URL
	target指连接在新窗口打开
	name是指给标签命名，不能中文，不能纯数字
	可以abc1.
	  -->
	
	<a href="https://www.w3school.com.cn/html/index.asp" target="_blank">这是一个连接</a>
	<hr>
	<a href="https://www.w3school.com.cn/html/index.asp" name="cainiao">a标签</a>
	<a href="#top">回到顶部</a>
	<table border="1" width="500">
		<caption>学生预览表</caption>
		<tr>
			<th>学号</th>
			<th>名字</th>
			<th>性别</th>
			<th>专业</th>
			</tr>
		<tr>
			<td>1001</td>
			<td>张1</td>
			<td>男</td>
			<td>计算机</td>
			</tr>
			<tr>
			<td>1002</td>
			<td>张2</td>
			<td>女</td>
			<td>俄语</td>
			</tr>
	</table>
	<hr>
		<table border="1" width="500">
			<tr>
				<td colspan="3">11</td>
				<td rowspan="3">12</td>
				
			</tr>
				<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				
			</tr>
				<tr>
				<td colspan="2">31</td>
				<td>32</td>
				
			</tr>
		</table>
		<hr>
		
		<table border="1" width="500">
			<tr><!-- 2 -->
				<td colspan="4">11</td>
				<td rowspan="4">12</td>
			</tr>
			<tr><!-- 2 -->
				<td rowspan="3">21</td>
				<td rowspan="2">22</td>
				<td colspan="2">23</td>
			</tr>
			<tr><!-- 3 -->
				<td>31</td>
				<td>32</td>
			</tr>
			<tr><!-- 4 -->
				<td colspan="3">41</td>
			</tr>
		</table>
		<hr>
		<!-- 1.表单的作用！！重点！！
		用于收集用户的信息，多用于登录页面
		或者注册页面！
		form标签：
			action属性：规定当提交表单时向何处发送表单数据
		 	type属性：表单输入项目的类型，默认type="text"文本框
		 	name属性：表单输入项目的名称，即传递参数的名字
		 	id属性：唯一性，方便JavaScript快速选择标签而设定
		 -->
		<form action="baidutest.html">
			<!-- 文本框 -->
		<div>
		<!-- label标签的for属性规定label 与哪个表单元素绑定 -->
		<!-- label的显示联系：用label标签的for属性关联某个表单项目的id属性 -->	
			<label for="name">用户名</label>
			<input type="text" name="name" id="name">
		</div>
			<!--密码框 -->
			<div>
			<label for="mima">密码</label>
			<input type="password" name="mima" id="name">
		</div>
		
		<!-- 单选框 
		注意：1.一组单选框需要设置相同的name属性
		      2.选择某个单选框的值，用value属性决定
		      3.设置单选框的默认选择效果用checked属性
		
		-->
		<div>
			<label>性别</label>
			<!-- label的隐示关系 -->
			<label>
				男<input type="radio" name="sex" value="male">
			</label>
		<label>
				女<input type="radio" name="sex" value="female" checked="checked">
			</label>
			</div>
			<div>
			<label>爱好</label>
			<label>
				滑滑板<input type="checkbox" name="hhb" value="hhb">
			</label>
			<label>
				看书<input type="checkbox" name="ks" value="ks">
			</label>
				<label>
				追剧<input type="checkbox" name="zj" value="zj">
			</label>
			</div>
		<!--下拉列表  -->
		<div>
		<label for="jiguan">籍贯</label>
		<select name="jiguan" id="jiguan">
			<option value="liaoning">辽宁</option>
			<option value="jilin">吉林</option>
			<option value="heilongjiang">黑龙江</option>
		</select>
		</div>
		
		<!-- 文本域 -->
		<div>
			<label for="tips">备注</label>
			<textarea rows="5" cols="30" name="tips" id="tips" ></textarea>
		</div>
		<div>
			<input type="submit" value="提交">
			<input type="reset" value="重置">
		</div>
		
		</form>
		
		
		
</body>
</html>